<template>
  <div>
    <h3>购物车</h3>
    <ShoppingCartTable
      class="tableStyle"
      :table-data="pageData"
      :column-headers="columnHeaders"
      :show-header="true"
      :score_existing="score_existing"
    ></ShoppingCartTable>
    <!-- page-size 每页显示条目个数  total 总条目数 -->
    <el-pagination
      class="announcementPagination"
      background
      layout="prev, pager, next"
      :page-size="pageSize"
      :total="tableData.length"
      :current-page.sync="currentPage"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>
<script>
import ShoppingCartTable from '@/components/Tables/ShoppingCartTable.vue'
export default {
  name: 'ShoppingCart',
  components: {
    'ShoppingCartTable': ShoppingCartTable
  },
  // 后台交互，根据账户来获取其购物车
  created () {
    this.ID = localStorage.getItem('userID')
    this.getShoppingCart()
    this.getScore()
  },
  data () {
    return {
      ID: '',
      // totalTableLength: 0, // 获取通告总数目
      pageSize: 8, // page-size 每页显示条目个数
      currentPage: 1,
      search: '',
      score_existing: 0,
      columnHeaders: [ // 列表的头标签
        {prop: 'name', label: '名称'},
        {prop: 'price', label: '价格'}
      ],
      tableData: [
      ] // 存储通告数据
    }
  },
  computed: {
    // 设置当前页的显示
    pageData: function () {
      return this.tableData.slice(((this.currentPage) - 1) * this.pageSize, this.currentPage * this.pageSize)
    }
  },
  destroyed: function () {
    this.save()
  },

  methods: {
    getScore () {
      let that = this
      let xmlhttp = new XMLHttpRequest()
      xmlhttp.open('POST', 'http://127.0.0.1:3100/users/getPoints')
      xmlhttp.setRequestHeader('content-type', 'application/json')
      let data = {id: this.ID}
      xmlhttp.onreadystatechange = function (res) {
        console.log(xmlhttp.response)
        if (xmlhttp.readyState === 4) {
          if (xmlhttp.status === 200) {
            that.score_existing = parseFloat(xmlhttp.response)
          }
        }
      }
      xmlhttp.send(JSON.stringify(data))
    },
    save () {
      let xmlhttp = new XMLHttpRequest()
      xmlhttp.open('POST', 'http://127.0.0.1:3100/users/refreshShoppingCart')
      xmlhttp.setRequestHeader('content-type', 'application/json')
      let data = {id: this.ID, cartBooks: this.saveItems()}
      xmlhttp.onreadystatechange = function (res) {
        if (xmlhttp.readyState === 4) {
          if (xmlhttp.status === 200) {
            console.log('购物车已保存')
          }
        }
      }
      xmlhttp.send(JSON.stringify(data))
    },
    saveItems () {
      let items = []
      console.log(this.tableData.length)
      for (var i = 0; i < this.tableData.length; i++) {
        let tem = {bookName: this.tableData[i].name, price: this.tableData[i].price, buyNum: this.tableData[i].number}
        items.push(tem)
      }
      return items
    },
    getShoppingCart () {
      let that = this
      let xmlhttp = new XMLHttpRequest()
      xmlhttp.open('POST', 'http://127.0.0.1:3100/users/getShoppingCart')
      xmlhttp.setRequestHeader('content-type', 'application/json')
      let data = {id: this.ID}
      xmlhttp.onreadystatechange = function (res) {
        if (xmlhttp.readyState === 4) {
          if (xmlhttp.status === 200) {
            that.dealRes(xmlhttp.response)
          }
        }
      }
      xmlhttp.send(JSON.stringify(data))
    },
    dealRes (res) {
      let items = JSON.parse(res)
      for (var i = 0; i < items.length; i++) {
        let tem = {name: items[i].bookName, price: items[i].price, number: items[i].buyNum, check: false}
        this.tableData.push(tem)
      }
    },
    handleCurrentChange (currentPage) {
      this.currentPage = currentPage
    }
  }
}
</script>

<style scoped>
  .tableStyle{
    margin-bottom: 2%;
    margin-left: 10%;
    width: 80%;
  }

</style>
